<script>
import UpdateAccountDialog from "@/components/comp/account_com/UpdateAccountDialog.vue";
import BinShow from "@/components/show_data/BinShow.vue";
import ZhuShow from "@/components/show_data/ZhuShow.vue";
import Account_Data1 from "@/components/comp/account_com/Account_Data1.vue";
import Account_Data2 from "@/components/comp/account_com/Account_Data2.vue";
export default {
  name: "ResultInfo",
  components: {Account_Data1, Account_Data2,ZhuShow, BinShow},
  data(){
    return {
      report:'',
      result:'',
      baseFileUrl:'http://8.152.4.101:9999/'
      // baseFileUrl:'http://localhost:9999/'
    }
  },
  computed:{
    hjAdd(){
        const area = this.report.hjArea;
        let area_address = "";
        if(area&&area.length>0){
            const arr = area.split(",")
            arr.forEach(item=>{
              area_address += item;
            })
        }
        return area_address;
    },
    ti(){
      return  Math.round(this.result.all * 100) / 100;
    },
    cf(){
      return  Math.round(this.result.rt * 100) / 100;
    },
    cp(){
      return Math.round(this.result.acc * 100) / 100;
    },

  },
  created() {
      this.show_reportInfo();
  },

  methods:{
    show_reportInfo(){
      this.report = this.$route.query.report;
      this.$http.get("reports/get_report_res",
          {
            params:{
              answerId:this.report.id,
              taskNo:this.report.taskNo,
              taskType:this.report.taskType
            }
          }
      ).then(res=>{
          this.result = res.data.data
      })
    },

    //导出报告
    export_report(){
      const _this = this;
      //处理数据
      var rep = this.report;
      rep.hjArea = this.hjAdd;
      rep.bk1 = this.ti;
      rep.bk2 = this.cf;
      rep.bk3 = this.cp;
      this.$http.post("reports/gener_reportInfo",rep).then(res=>{
          if(res.data.success){
              const fileUrl = res.data.data;
              _this.$http({
                  url:this.baseFileUrl + fileUrl,
                  method:"GET",
                  responseType:'blob'
              }).then(res=>{
                //创建一个链接DOM节点
                const link = document.createElement('a');
                // 创建一个新的Blob对象
                const blob = new Blob([res.data]);
                // 创建blob链接
                link.href = window.URL.createObjectURL(blob);
                var type = _this.report.taskType
                var tx_str = "";  //题型一
                if(type==1 || type==4){
                  tx_str = type==1?"IFAC1":"IFEM1";
                }else if(type==2 || type==5){
                  tx_str = type==2?"IFAC2":"IFEM2"
                }else if(type==3  || type==6){
                  tx_str = type==3?"IFAC3":"IFEM3"
                }else if(type==7){
                  tx_str = "IFEM4";
                }else{
                  tx_str = type>30?"IFEMZ":"IFACZ";
                }
                var task_no = _this.report.taskNo.substring(1);
                link.download = _this.report.realName + "-" + tx_str + "-" + task_no  +".xlsx";//下载的文件名加后缀 可自定义
                // 隐藏DOM节点
                link.style.display = 'none';
                // 将链接节点添加到DOM中
                document.body.appendChild(link);
                // 模拟点击下载
                link.click();
                // 移除DOM节点
                document.body.removeChild(link);
              })
          }else {
            _this.$message.error("文件下载失败，请稍后重试");
          }
      })
    }
  }
}
</script>

<template>
  <div>
        <el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'account_info' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'res_list' }">评测结果</el-breadcrumb-item>
            <el-breadcrumb-item >评测分析</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>

<!-----------------------------个人基础信息模块--------------------------------------------------------------->
        <el-card class="box-card" style="margin-top: 20px;border: 2px solid #d9e8fa">
          <el-row>
            <el-col :span="22"><span style="font-size: 30px;font-weight: 350">基本信息</span></el-col>

            <el-col  :span="2"><el-button  @click="export_report"  type="primary" icon="el-icon-editor">导出报告</el-button></el-col>
          </el-row>

          <el-row style="margin-top:25px">

            <el-row >
              <el-col :span="7" :offset="1">
                姓名 : <span>{{ report.realName }}</span>

              </el-col>
              <el-col :span="7" >

                账号 : <span>{{ report.uname }}</span>
              </el-col>
              <el-col :span="9" >
                任务编号 : &nbsp;<span>{{report.taskNo }}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px" >
              <el-col :span="7" :offset="1">
                年龄 : <span>{{ report.answerAge }}</span>
              </el-col>
              <el-col :span="7" >
                学历 : <span>{{ report.qualification }}</span>
              </el-col>
              <el-col :span="9" >
                任务名称 : <span>{{ report.groupName }}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px" >
              <el-col :span="5" :offset="1">
                性别 : <span>{{ report.gender==0?'男':'女' }}</span>
              </el-col>
              <el-col :span="7" :offset="2">
                电话 : <span>{{ report.phone }}</span>
              </el-col>

              <el-col :span="9" >
                报告时间 : <span>{{ report.reportTime}}</span>
              </el-col>
            </el-row>

            <el-row style="margin-top: 20px" >
              <el-col :span="5" :offset="1">
                正确率 : <span>{{ report.rightRate*100}}%</span>
              </el-col>

              <el-col :span="7" :offset="2">
                平均反应时 : <span>{{ report.avgTime }}ms</span>
              </el-col>

              <el-col :span="9" >
                户籍地址 : <span>{{ hjAdd}}</span>
              </el-col>

            </el-row>

          </el-row>
        </el-card>

<!-----------------------------数据分析表格---------------------------------------->
    <el-row  style="margin-top: 5px">
      <el-card class="box-card" style="width: 100%;height:350px;border: 2px solid #cbfbc8">
        <el-row>
          <el-col :span="22"><span style="font-size: 30px;font-weight: 350">结果报告</span></el-col>
        </el-row>
        <el-row>
          <el-col :offset="1" style="margin-top: 25px">
            <table style="text-align: center;font-size: 20px"  border="1" width="90%" rules="all" align="center" >


              <tr style="background-color: #fbedc8">
                <td colspan="2" rowspan="2">
                  康老指数-TI<br>(CLAI<sub>total index</sub>)
                </td>
                <td colspan="2">参考值</td>
                <td>5.5-7.5</td>
                <td colspan="3" rowspan="2" style="font-size: 38px">
                  <span v-if="ti < 7.5">
                    ——
                  </span>
                  <span v-if="ti >7.49 && ti < 8.01 ">
                    ↑
                  </span>
                  <span v-if="ti >8">
                    ↑↑
                  </span>
                </td>
              </tr>

              <tr style="background-color: #fbedc8">
                <td colspan="2">实际值</td>
                <td>{{ ti }}</td>
              </tr>


              <tr style="background-color: #eaffea">
                <td rowspan="2" style="width: 220px">
                  康老指数-CF<br/>
                  (CLAI<sub>cognitive facility</sub>)
                </td>
                <td>参考值</td>
                <td>5.5-7.5</td>
                <td rowspan="2" style="font-size: 38px">
                   <span v-if="cf < 7.5">——</span>
                  <span v-else-if="cf > 7.49 && cf < 8.01 ">↑</span>
                  <span v-else-if="cf > 8">↑↑</span>
                </td>
                <td rowspan="2" style="width: 240px">
                  康老指数-CP<br/>
                  (CLAI<sub>cognitive precision</sub>)
                </td>
                <td>参考值</td>
                <td>5.5-7.5</td>
                <td rowspan="2" style="font-size: 38px">
                   <span v-if="cp < 7.5">
                    ——
                  </span>
                  <span v-if="cp > 7.49 && cp < 8.01 ">
                    ↑
                  </span>
                  <span v-if="cp > 8">
                    ↑↑
                  </span>
                </td>
              </tr>


              <tr style="background-color: #eaffea">
                <td>实际值</td>
                <td>{{ cf }}</td>
                <td>实际值</td>
                <td>{{ cp }}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :offset="1">
            <h3>注：— 代表正常老化；↑ 代表中度老化；↑↑ 代表重度老化。</h3>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

<!---------------------------个人近期评测结果分析表------------------------------------------------------------->
<!--        <el-row :gutter="5" style="margin-top: 5px">-->
<!--            <el-col :span="12">-->
<!--              <el-card class="box-card" >-->
<!--                <Account_Data1></Account_Data1>-->
<!--              </el-card>-->
<!--            </el-col>-->

<!--            <el-col :span="12" >-->
<!--              <el-card class="box-card" >-->
<!--                <Account_Data2></Account_Data2>-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->


  </div>
</template>

<style scoped>
  table1{
    text-align: center;
    margin: 0 auto;
    background-color: red;
  }
  td{
    width: 120px;
    height: 50px;
  }
  #tr1 tr2{
    background-color: #C8E7FB;
  }

  .user_info_ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }
  .user_info_ul li{
    width: 400px;
    background-color: #e7e1cd;
  }
</style>